<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const active = ref(0)

const pages = [
  { title: '微信', path: '/wechat', icon: 'chat', dot:true },
  { title: '通讯录', path: '/contact', icon: 'friends'},
  { title: '发现', path: '/discover', icon: 'eye' },
  { title: '我', path: '/setting', icon: 'setting' },
]

const show = computed(() => {
  return route.meta.TabBar
})
</script>

<template>
  <van-tabbar
    v-if="show"
    v-model="active"
    active-color="var(--van-success-color)"
    placeholder
    route
  >
    <van-tabbar-item v-for="(item, index) in pages" :key="index" :to="item.path" replace>
      {{ item.title }}
      <template #icon="props">
        <van-icon :name="props.active ? item.icon : item.icon + '-o'" :dot="item.dot" size="26" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<style lang="less" scoped></style>
